<template>
	<!-- 门店审核 -->
	<view class="examineStore-main" v-if="storeInfo">
		<!-- 审核状态 -->
		<view class="examineStore-status">
			<uni-icons type="info-filled" size="60" color="#ffcb00" v-if="storeInfo.status == 2"></uni-icons>
			<uni-icons type="clear" size="60" color="#e43927" v-if="storeInfo.status == 3"></uni-icons>

			<view class="title">
				{{ statusFilter(storeInfo.status) }}
			</view>
		</view>

		<!-- 门店信息 -->
		<view class="examineStore-info">
			<view class="examineStore-header">
				门店信息
				<view class="store-item-btn" v-if="storeInfo.status == 3" @click="gotoPath">去编辑</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">药店名称</view>
				<view class="store-item-value">
					{{ storeInfo.name || '暂无信息' }}
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">门店LOGO</view>
				<view class="store-item-value">
					<image :src="imageUrls(storeInfo.image)" class="imageSty" mode="widthFix"></image>
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">所在区域</view>
				<view class="store-item-value">
					{{ addressInfo }}
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">详细地址</view>
				<view class="store-item-value">
					{{ storeInfo.address || '暂无信息' }}
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">联系人姓名</view>
				<view class="store-item-value">
					{{ storeInfo.contact_name || '暂无信息' }}
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">联系人电话</view>
				<view class="store-item-value">
					{{ storeInfo.contact_phone || '暂无信息' }}
				</view>
			</view>
			<view class="store-item" v-if="storeType == '0'">
				<view class="store-item-label">门店内图片</view>
				<view class="store-item-value">
					<image :src="imageUrls(item)" class="imageSty" mode="widthFix" v-for="(item, index) in getStoreLayoutImages(storeInfo)" :key="index"></image>
				</view>
			</view>
		</view>

		<!-- 门店资质 -->
		<view class="examineStore-aptitude">
			<view class="examineStore-header" v-if="storeType != 2">
				门店资质
				<view class="store-item-btn" v-if="storeInfo.status == 3" @click="gotoPaths">去编辑</view>
			</view>
			<view class="store-item" v-if="storeType != 2">
				<view class="store-item-label">营业执照名称</view>
				<view class="store-item-value">
					{{ storeInfo.business.name || '暂无信息' }}
				</view>
			</view>
			<view class="store-item" v-if="storeType != 2">
				<view class="store-item-label">社会统一信用代码</view>
				<view class="store-item-value">
					{{ storeInfo.business.number || '暂无信息' }}
				</view>
			</view>
			<view class="store-item" v-if="storeType != 2">
				<view class="store-item-label">营业执照图片</view>
				<view class="store-item-value">
					<image :src="imageUrls(storeInfo.business.image)" class="imageSty" mode="widthFix"></image>
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">法人身份证姓名</view>
				<view class="store-item-value">
					{{ storeInfo.idcard.name || '暂无信息' }}
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">法人身份证号</view>
				<view class="store-item-value">
					{{ storeInfo.idcard.idcard || '暂无信息' }}
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">法人身份证信息面</view>
				<view class="store-item-value">
					<image :src="imageUrls(storeInfo.idcard.front)" class="imageSty" mode="widthFix"></image>
				</view>
			</view>
			<view class="store-item">
				<view class="store-item-label">法人身份证国徽面</view>
				<view class="store-item-value">
					<image :src="imageUrls(storeInfo.idcard.reverse)" class="imageSty" mode="widthFix"></image>
				</view>
			</view>
			<view class="store-item" v-if="storeType == '0'">
				<view class="store-item-label">签约协议文件链接</view>
				<view class="store-item-value" style="color: #2979ff;" @click="openSignAgreementFile(storeInfo.sign_agreement_file)">
					打开链接
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { flashManageInfo } from '../../../api/flashManage/index.js';
import { imageUrl } from '../../../utils/tools.js';
import { commonArea } from '../../../api/home/index.js';
export default {
	data() {
		return {
			storeInfo: null,
			storeType: '',
			provinceList: [],
			cityList: [],
			areaList: [],
			addressInfo: ''
		};
	},
	async onShow() {
		this.storeType = this.$store.state.storeType;
		await this.getflashManageInfo();
		await this.getcommonArea();
		await this.getAddressInfo();
	},
	methods: {
		// 门店信息
		async getflashManageInfo() {
			try {
				const resData = await flashManageInfo({
					type: this.storeType
				});
				this.storeInfo = resData.data;
				console.log(this.storeInfo);
			} catch (e) {
				throw Error(e);
			}
		},

		// 图片路径拼接
		imageUrls(fileUrl) {
			return imageUrl(fileUrl);
		},

		// 地址
		async getcommonArea() {
			try {
				const provinceData = await commonArea();
				if (provinceData.code == 1) {
					this.provinceList = provinceData.data;
					const cityData = await commonArea({
						pid: this.storeInfo.province_id
					});
					if (cityData.code == 1) {
						this.cityList = cityData.data;
						const areaData = await commonArea({
							pid: this.storeInfo.city_id
						});
						if (areaData.code == 1) {
							this.areaList = areaData.data;
						}
					}
				}
			} catch (e) {
				throw Error(e);
			}
		},

		// 详细地址信息
		async getAddressInfo() {
			if (this.storeInfo.district_id) {
				let provinceInfo = this.provinceList.filter((item) => {
					if (item.id == this.storeInfo.province_id) {
						return item;
					}
				});

				let cityInfo = this.cityList.filter((item) => {
					if (item.id == this.storeInfo.city_id) {
						return item;
					}
				});

				let areaInfo = this.areaList.filter((item) => {
					if (item.id == this.storeInfo.district_id) {
						return item;
					}
				});
				this.addressInfo = provinceInfo[0].name + '/' + cityInfo[0].name + '/' + areaInfo[0].name;
			} else {
				return '暂无信息';
			}
		},

		statusFilter(val) {
			const statusList = {
				2: '店铺审核中，请稍后...',
				3: '店铺审核失败，请核对店铺信息与资质'
			};
			return statusList[val];
		},

		gotoPath() {
			if (this.storeType == 1) {
				uni.navigateTo({
					url: '/pages/storeSide/flashStoreEdit/flashStoreEdit?type=eidt'
				});
			} else if (this.storeType == 0) {
				uni.navigateTo({
					url: '/pages/storeSide/cloudStoreEdit/cloudStoreEdit?type=eidt'
				});
			}
		},

		gotoPaths() {
			if (this.storeType == 1) {
				uni.navigateTo({
					url: '/pages/storeSide/flashStoreAuthentication/flashStoreAuthentication?type=eidt'
				});
			} else if (this.storeType == 0) {
				uni.navigateTo({
					url: '/pages/storeSide/cloudStoreAuthentication/cloudStoreAuthentication?type=eidt'
				});
			}
		},

		getStoreLayoutImages(info) {
			if (info.store_layout_images) {
				return info.store_layout_images.split(',');
			} else {
				return [];
			}
		},
		
		openSignAgreementFile(url){
			uni.downloadFile({
			  url: url,
			  success: function (res) {
			    var filePath = res.tempFilePath;
			    uni.openDocument({
			      filePath: filePath,
			      showMenu: true,
			      success: function (res) {
			        console.log('打开文档成功');
			      }
			    });
			  }
			});
		}
	}
};
</script>

<style scoped lang="scss">
@mixin boxDef {
	box-sizing: border-box;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}
.examineStore-main {
	box-sizing: border-box;
	padding: 20rpx;
	.examineStore-status {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 40rpx;
		margin-bottom: 80rpx;
		.title {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #444;
		}
	}

	.examineStore-info {
		@include boxDef;
	}

	.examineStore-aptitude {
		@include boxDef;
	}
}

.examineStore-header {
	margin-bottom: 30rpx;
	border-bottom: 1px #f3f3f3 solid;
	padding-bottom: 30rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.store-item {
	padding-bottom: 20rpx;
	font-size: 26rpx;
	color: #444;
	display: flex;
	.store-item-label {
		width: 170rpx;
		color: #999;
	}
	.store-item-value {
		flex: 1;
		.imageSty {
			width: 200rpx;
		}
	}
}

.store-item-btn {
	text-align: center;
	font-size: 26rpx;
	color: #fff;
	background-color: #2979ff;
	padding: 10rpx 30rpx;
	border-radius: 10rpx;
}
</style>